md-toolbar
	.md-toolbar-tools
		md-button.md-icon-button
			md-icon.angular-material-icons(aria-label="Screenshot") camera_alt
		h2 Screenshot
		span(flex)
		md-button.md-icon-button(ng-click="vm.closeDialog()")
			md-icon.angular-material-icons(aria-label="Close dialog") close
md-content#screenshotContent(layout="row", layout-align="center center")
	img#screenshotImage(ng-src="{{vm.screenshotUse}}")
	#screenshotContainer(ng-if="!vm.screenshot")
		canvas#scribbleCanvas
		#screenshotActions(
			layout-align="center center"
			layout="row", 
			style="pointer-events:{{vm.actionsPointerEvents}}")

			md-container.colorContainer
				md-select.penColor(
					ng-model="vm.penCol")

					md-option(
						ng-repeat="(key, value) in vm.penColors"
						ng-show="key !== 'eraser' || (vm.isEraserMode && key === 'eraser')"
						ng-disabled="vm.isEraseMode"
						ng-selected="value.color === vm.penCol"
						value="{{value.color}}") {{value.label}}

			div.sizeContainer(layout="row" flex layout-align="center center")
				md-slider(
					layout-align="center center"
					md-discrete
					ng-model="vm.penIndicatorSize" 
					step="3" 
					min="2" 
					max="56"
					ng-change="vm.changePenSize()")

			md-button.md-icon-button(
				ng-repeat="(action, actionValue) in vm.actions"
				aria-label="{{actionValue.icon}}"
				ng-click="vm.doAction(action)")

					md-tooltip(md-direction="bottom") {{actionValue.label}}

					md-icon.angular-material-icons(
						ng-if="actionValue.icon.indexOf('fa fa-') === -1"
						style="color:{{actionValue.color}}") {{actionValue.icon}}
					md-icon#screenshotFAIcon(
						ng-if="actionValue.icon.indexOf('fa fa-') !== -1"
						class="fa fa-eraser"
						style="color:{{actionValue.color}}")

			md-button.md-fab.md-mini(
				id="saveCommentScreenshot"
				ng-click="vm.saveScreenshot()")
				
				md-icon.angular-material-icons(aria-label="Save") save

canvas#screenshotCanvas
md-icon#screenshotPenIndicator(
	width="{{vm.penIndicatorSize + 'px'}}"
	height="{{vm.penIndicatorSize + 'px'}}"
	class="fa fa-circle-thin"
	ng-show="vm.showPenIndicator")
